<template>
    <div class="box">
        <div class="div-1">
            <el-card class="box-card">
                <div slot="header" class="clearfix">
                    <span class="box-title">热门推荐</span>
                    <el-button style="float: right; padding: 3px 0" type="text">查看更多</el-button>
                </div>
                <el-tooltip effect="dark" placement="right" v-for="item in imagelist.slice(0, 8)" :key="item.id"
                    class="tooltip">
                    <p slot="content" style="font-size: 14px; margin-bottom: 6px">
                        {{ item.name }}
                    </p>
                    <p slot="content" style="font-size: 13px; margin-bottom: 10px">

                        <span>简介：{{ item.introduction }}</span><br />
                        <span>要求：{{ item.age }}</span><br>
                        <span>身高要求：{{ item.height }}</span>
                    </p>
                    <el-card style="width:300px;margin-bottom: 20px; height: 233px; float: left; margin-right: 15px;"
                        class="book" bodyStyle="padding:10px" shadow="hover">
                        <div class="zoom-wrapper">
                            <img :src="item.img" alt="封面" />
                        </div>
                        <div class="info">
                            <div class="title">
                                <span>{{ item.name }}</span>
                            </div>
                        </div>
                        <div class="author">{{ item.brand }}</div>
                    </el-card>
                </el-tooltip>
            </el-card>


        </div>
        <div class="div-2"> <el-card class="box-card">
                <div slot="header" class="clearfix">
                    <span class="box-title">园区动态</span>
                    <el-button style="float: right; padding: 3px 0" type="text">查看更多</el-button>
                </div>

                <HomeNews></HomeNews>

            </el-card></div>
    </div>

</template>

<script>
import HomeNews from './HomeNews';
export default {
    data() {
        return {

            imagelist: [],
        }
    },
    components: {
        HomeNews
    },
    mounted() {
        this.aa();
    },
    methods: {
        aa() {
            var _this = this
            this.$axios.get('/recommended').then(resp => {
                if (resp && resp.status === 200) {
                    _this.imagelist = resp.data
                }
            })
        }
    },
}

</script>
<style>
.time {
    font-size: 13px;
    color: #999;
}

.bottom {
    margin-top: 13px;
    line-height: 12px;
}

.button {
    padding: 0;
    float: right;
}

.img {
    width: 100%;
    display: block;
}

.clearfix:before,
.clearfix:after {
    display: table;
    content: "";
}

.clearfix:after {
    clear: both
}




.title {
    position: relative;
    left: 30%;
}

.tooltip {
    position: relative;
    left: 6%;
}

/* 鼠标经过图片进行放大处理---transform */
.zoom-wrapper {
    height: 200px;
    overflow: hidden;
    border-radius: 16px;
}

.zoom-wrapper img {
    object-fit: cover;
    transition: transform 0.8s;
    height: 100%;
}

.zoom-wrapper:hover img {
    -ms-transform: scale(1.3);
    -webkit-transform: scale(1.3);
    transform: scale(1.3);
}

.div-1 {
   
    flex: 3;
}

.div-2{
    flex: 1;
    
}


.box {
    width: 100%;
    display: flex;
}
</style>